<template>
  <div>
    <el-container>
      <el-header>
        <span>科学计算器</span>
        <div style="margin-left: 20px; display: flex; align-items: center;">
          <el-radio-group v-model="calculationMode" @change="handleModeChange">
            <el-radio-button label="precise">精准计算</el-radio-button>
            <el-radio-button label="decimal">保留小数位数</el-radio-button>
          </el-radio-group>
          <el-input-number 
            v-if="calculationMode === 'decimal'"
            v-model="decimalDigits" 
            :min="0" 
            :max="15" 
            controls-position="right"
            style="margin-left: 10px; width: 120px"
          ></el-input-number>
        </div>
      </el-header>

      <el-main>
        <div class="calculator-container">
          <div class="calculator-display">
            <div class="calculator-expression">{{ currentExpression || '0' }}</div>
            <div class="calculator-result">{{ formattedResult || '0' }}</div>
          </div>
          
          <div class="calculator-buttons">
            <!-- 保持原有按钮布局不变 -->
            <el-row>
              <el-button @click="clearAll()" type="danger" plain>C</el-button>
              <el-button @click="deleteLastChar()" plain>del</el-button>
              <el-button @click="appendToExpression('(')" plain>(</el-button>
              <el-button @click="appendToExpression(')')" plain>)</el-button>
              <el-button @click="appendToExpression('ln(')" plain>ln</el-button>
            </el-row>
            
            <el-row>
              <el-button @click="appendToExpression('sin(')" plain>sin</el-button>
              <el-button @click="appendToExpression('7')">7</el-button>
              <el-button @click="appendToExpression('8')">8</el-button>
              <el-button @click="appendToExpression('9')">9</el-button>
              <el-button @click="appendToExpression('+')" type="primary" plain>+</el-button>
            </el-row>
            
            <el-row>
              <el-button @click="appendToExpression('cos(')" plain>cos</el-button>
              <el-button @click="appendToExpression('4')">4</el-button>
              <el-button @click="appendToExpression('5')">5</el-button>
              <el-button @click="appendToExpression('6')">6</el-button>
              <el-button @click="appendToExpression('-')" type="primary" plain>-</el-button>
            </el-row>
            
            <el-row>
              <el-button @click="appendToExpression('tan(')" plain>tan</el-button>
              <el-button @click="appendToExpression('1')">1</el-button>
              <el-button @click="appendToExpression('2')">2</el-button>
              <el-button @click="appendToExpression('3')">3</el-button>
              <el-button @click="appendToExpression('*')" type="primary" plain>*</el-button>
            </el-row>
            
            <el-row>
              <el-button @click="appendToExpression('π')" plain>π</el-button>
              <el-button @click="appendToExpression('0')">0</el-button>
              <el-button @click="appendToExpression('.')">.</el-button>
              <el-button @click="calculate()" type="success" plain>=</el-button>
              <el-button @click="appendToExpression('/')" type="primary" plain>/</el-button>
            </el-row>
          </div>
        </div>
      </el-main>

      <el-footer>
        <div v-if="history.length > 0">
          <p>计算历史：</p>
          <el-table :data="history" style="width: 100%" height="150">
            <el-table-column prop="expression" label="表达式"></el-table-column>
            <el-table-column prop="formattedResult" label="结果" width="150"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click="useHistory(scope.row)" size="mini">使用</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      calculationMode: 'precise', // 'precise' 或 'decimal'
      decimalDigits: 2, // 默认保留2位小数
      currentExpression: '',
      currentResult: '',
      history: [],
      precision: 10 // 后端计算精度
    };
  },
  computed: {
    formattedResult() {
      if (this.currentResult === '' || this.currentResult === 'Error') {
        return this.currentResult || '0';
      }
      
      if (this.calculationMode === 'precise') {
        return this.currentResult;
      } else {
        // 保留小数位数处理
        const num = parseFloat(this.currentResult);
        if (isNaN(num)) return this.currentResult;
        
        // 使用toFixed保留指定小数位数，会自动补零
        return num.toFixed(this.decimalDigits);
      }
    }
  },
  methods: {
    handleModeChange() {
      // 模式切换时不需要额外处理
    },
    
    appendToExpression(value) {
      if (value === 'ans' && this.currentResult) {
        this.currentExpression += this.currentResult;
      } else {
        this.currentExpression += value;
      }
    },
    
    clearAll() {
      this.currentExpression = '';
      this.currentResult = '';
    },
    
    deleteLastChar() {
      this.currentExpression = this.currentExpression.slice(0, -1);
    },
    
    async calculate() {
      if (!this.currentExpression) {
        this.$message.warning('请输入表达式');
        return;
      }
      
      const requestData = {
        expression: this.currentExpression,
        precision: this.precision
      };
      
      try {
        const { data } = await this.$http({
          url: this.$http.adornUrl("/calculator/calculate"),
          method: "post",
          data: this.$http.adornData(requestData, false),
        });
        
        if (data.success) {
          this.currentResult = data.result;
          this.history.unshift({
            expression: this.currentExpression,
            result: this.currentResult,
            formattedResult: this.formattedResult
          });
        } else {
          this.showError(data.error);
        }
      } catch (error) {
        this.showError(error.message);
      }
    },
    
    showError(message) {
      this.$message.error('计算错误: ' + message);
      this.currentResult = 'Error';
    },
    
    useHistory(item) {
      this.currentExpression = item.expression;
      this.currentResult = item.result;
    }
  }
};
</script>

<style scoped>
/* 保持原有的样式不变 */
.calculator-container {
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.calculator-display {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px 15px;
  margin-bottom: 20px;
  text-align: right;
  min-height: 80px;
}

.calculator-expression {
  font-size: 1.2em;
  color: #909399;
  min-height: 1.5em;
  word-wrap: break-word;
}

.calculator-result {
  font-size: 1.8em;
  font-weight: bold;
  min-height: 1.8em;
  word-wrap: break-word;
}

.calculator-buttons .el-row {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.calculator-buttons .el-button {
  width: 60px;
  height: 60px;
  margin: 0 5px;
  font-size: 1.2em;
}

.el-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
}

.el-footer {
  border-top: 1px solid #dcdfe6;
  margin-top: 20px;
}
</style>